<template>
    <h3>会员卡管理</h3>
    <div class="member-management-container">
        <!-- 顶部选项卡 -->
        <el-tabs v-model="activeTab" class="main-tabs">
            <el-tab-pane label="会员卡管理" name="card"></el-tab-pane>
            <el-tab-pane label="等级设置" name="level"></el-tab-pane>
            <el-tab-pane label="领卡协议" name="agreement"></el-tab-pane>
        </el-tabs>

        <!-- 非认证提示
        <el-alert v-if="!isCertified" title="非认证服务号不可开启微信原生会员卡功能支持" type="warning" :closable="false"
            class="certification-alert" /> -->

        <div class="content-wrapper">
            <!-- 头部操作栏 -->
            <div class="action-header">

                <div>
                    <!-- <el-link type="primary" class="footer-link" @click="showDetail">
                        微信原生会员卡功能可允许会员将领取到的会员卡同步至微信卡包并使用 了解详情
                    </el-link> -->
                    非认证服务号不可开启微信原生会员卡功能支持
                    <el-button type="primary" @click="showDetail" >编辑会员卡</el-button>
                    <el-button type="danger">停用</el-button>
                    <p style="color: darkgray;"> 微信原生会员卡功能可允许会员将领取到的会员卡同步至微信卡包并使用 了解详情</p>
                </div>
            </div>

            <!-- 基本设置区块 -->
            <el-card class="section-card">
                <template #header>
                    <div class="section-title">基本设置</div>
                </template>

                <el-form label-width="120px">
                    <!-- 会员卡标题 -->
                    <el-form-item label="会员卡标题">
                        <el-input v-model="form.title"  style="width: 400px" />
                    </el-form-item>

                    <!-- 会员卡详情 -->
                    <el-form-item label="特权介绍">
                        <el-input v-model="form.privilegedintroduce" type="textarea" :rows="3"  />
                    </el-form-item>

                    <el-form-item label="使用须知">
                        <el-input v-model="form.usenotice" type="textarea" :rows="3"  />
                    </el-form-item>

                    <el-form-item label="操作提示">
                        <el-input v-model="form.operationtip" type="textarea" :rows="2"  />
                    </el-form-item>
                </el-form>
            </el-card>

            <!-- 激活设置区块 -->
            <el-card class="section-card">
                <template #header>
                    <div class="section-title">激活设置</div>
                </template>

                <div class="activation-section">
                    <div class="activation-header">
                        <h4>激活条件</h4>
                        <el-tag type="primary">{{ form.activatecondition }}</el-tag>
                    </div>

                    <div class="member-info-section">
                        <h4>会员资料</h4>
                        <el-table :data="memberFields" border style="width: 100%" header-row-class-name="table-header">
                            <el-table-column prop="name" label="信息名称" width="180" />
                            <el-table-column label="是否必填">
                                <template #default="{ row }">
                                    <el-tag v-if="row.required" type="danger" size="small">
                                        必填
                                    </el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="是否可修改">
                                <template #default="{ row }">
                                    <el-icon v-if="!row.editable" class="lock-icon">
                                        <CloseBold />
                                    </el-icon>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </el-card>
        </div>


    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { CloseBold } from '@element-plus/icons-vue'
import { getMembershipcard } from '@/api/index'
import router from '@/router'

const activeTab = ref('card')
const isCertified = ref(false)

const form = reactive({
    title: '',
    privilegedintroduce: '',
    usenotice: '',
    operationtip: '',
    activatecondition:''
})

const memberFields = reactive([
    { name: '手机号', required: true, editable: false },
    { name: '姓名', required: true, editable: false },
    { name: '性别', required: true, editable: false },
    { name: '生日', required: true, editable: false }
])
const getCard=()=>{
    getMembershipcard().then(res=>{
        form.title=res.data.title
        form.privilegedintroduce=res.data.privilegedintroduce
        form.usenotice=res.data.usenotice
        form.operationtip=res.data.operationtip
        form.activatecondition=res.data.activatecondition
    })
}
onMounted(()=>{
    getCard()
})
const showDetail = () => {
    // 处理详情跳转逻辑
   
    router.push({
        name:'InsertVipManagementView'
    })
}
</script>

<style scoped>
.member-management-container {
    padding: 20px;
    background: #fff;
    max-width: 1200px;
    margin: 0 auto;
}

.main-tabs {
    margin-bottom: 20px;
}

.certification-alert {
    margin-bottom: 20px;
}

.content-wrapper {
    padding: 0 20px;
}

.action-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;

    h3 {
        color: #333;
        font-size: 18px;
    }
}

.section-card {
    margin-bottom: 20px;

    :deep(.el-card__header) {
        background: #f8f9fa;
        border-bottom: 1px solid #eee;
    }
}

.section-title {
    font-weight: 600;
    color: #333;
}

.activation-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    h4 {
        margin: 0 15px 0 0;
        color: #666;
    }
}

.member-info-section {
    h4 {
        color: #666;
        margin: 25px 0 15px;
    }
}

.table-header {
    background: #f8f9fa !important;
}

.lock-icon {
    color: #f56c6c;
    font-weight: bold;
}

.footer-link {
    display: block;
    margin-top: 20px;
    text-align: center;
}
</style>